<template>
    <div id="addAccountView">
        <table class="table table-bordered table-hover" >
            <tbody>
                <tr>
                    <td>账户名</td>
                    <td>

                        <!-- <el-input v-model="accountInfo.accountName" placeholder="请输入内容"></el-input> -->
                        <input name="账户名" v-model="accountInfo.accountName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('账户名') }" type="text" placeholder="账户名">
                        <i v-show="errors.has('账户名')" class="fa fa-warning"></i>
                        <span v-show="errors.has('账户名')" class="help is-danger">{{ errors.first('账户名') }}</span>
                    </td>
                    <td>密码</td>
                    <td>
                        <input name="密码" v-model="accountInfo.password" v-validate="'required|password'" :class="{'input': true, 'is-danger': errors.has('密码') }" type="text" placeholder="密码">
                        <i v-show="errors.has('密码')" class="fa fa-warning"></i>
                        <span v-show="errors.has('密码')" class="help is-danger">{{ errors.first('密码') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>邮箱地址</td>
                    <td>
                       <p :class="{ 'control': true }">
                            <input  v-model="accountInfo.emailAddress" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('邮箱地址') }" name="邮箱地址" type="text" placeholder="邮箱地址">
                            <span v-show="errors.has('邮箱地址')" class="help is-danger">{{ errors.first('邮箱地址') }}</span>
                        </p>
                    </td>
                     <td>真名</td>
                    <td>
                         <input name="真名" v-model="accountInfo.realName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('真名') }" type="text" placeholder="真名">
                        <i v-show="errors.has('真名')" class="fa fa-warning"></i>
                        <span v-show="errors.has('真名')" class="help is-danger">{{ errors.first('真名') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>描述</td>
                    <td>
                         <el-row >
                            <el-col>
                                <el-input v-model="accountInfo.description" placeholder="请输入内容"></el-input>
                            </el-col>
                        </el-row>
                    </td>
                    <td>昵称</td>
                    <td>
                        <input name="昵称" v-model="accountInfo.nickName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('昵称') }" type="text" placeholder="昵称">
                        <i v-show="errors.has('昵称')" class="fa fa-warning"></i>
                        <span v-show="errors.has('昵称')" class="help is-danger">{{ errors.first('昵称') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                         <el-row>
                            <el-col>
                                <el-switch
                                v-model="accountInfo.status"
                                active-text="启用"
                                inactive-text="禁用">
                                </el-switch>
                            </el-col>
                        </el-row>
                    </td>
                    <td>学校</td>
                    <td>
                        <el-select filterable v-model="accountInfo['campusId']" @click.native="loadData('campus','campus')">
                            <el-option
                            v-for="(item,key) in campus" 
                            :key = key
                            :label="item.campusName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <el-row>
                            <el-col :span="20" offset="10" >
                            <el-button type="primary" @click="addAccount">提交</el-button>
                                <el-button type="danger" @click="handleClose">取消</el-button>
                            </el-col>
                        </el-row>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
import qs from 'qs'
export default {
     data() {
      return {
        accountInfo: {
            campusId: '',
            accountName: '',
            password: '',
            nickName: '',
            realName: '',
            headPicture: '',
            emailAddress: '',
            emailPassword: '',
            status: true,
            description: ''
        },
        campus: []
      }
    },
    methods: {
        onSubmit() {
        },
        handleClose(){
            this.$router.go(-1);
        },
        loadData(type,data){
            var url = window.baseURL+`/backstage/${type}/findByPage?token=${this.$token}`;
             this.$http.get(url)
            .then((response)=>{
                this[data] = response.data.data.list.results;
            })
            .catch((error)=>{
            })
        },
      addAccount(){
        var checkDataArr = ["accountName","password","nickName","realName","emailAddress","status"];
        var goon = this.checkData(checkDataArr,this.accountInfo);
        if(!goon){
            return;
        }
        //发送新怎账号的请求  /backstage/account/insert
        var insertURL = window.baseURL+"/backstage/account/insert";
        this.accountInfo.status = Number(this.accountInfo.status);
        this.accountInfo.token = this.$token;
        this.$http.post(insertURL,qs.stringify(this.accountInfo))
        .then((response)=>{
            this.$router.go(-1);            
        })
        .catch((error)=>{
        })
      }
    }
}
</script>

<style lang="scss" scoped>
    #addAccountView {
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        bottom: 0px;
        top: 0px;
        background: white;
        z-index: 101;
        padding: 50px;
    }
</style>
